<template>
  <div :style="'height: '+windowHeight+'px;width:'+windowWidth+'px;'">
    <!--<Carousel autoplay v-model="value2" loop>-->
      <!--<CarouselItem v-for="i in 5"  :key="i">-->
        <!--<div class="demo-carousel" style="width: 500px;height: 200px;">{{i}}</div>-->
      <!--</CarouselItem>-->
    <!--</Carousel>-->

    <div class="flex flex-column align-center justify-center">
      <div style="width: 1200px;height: 50px;position: fixed;top: 0px;z-index: 998;background-color: white;"
           class="flex align-center justify-between">
        <div class="flex align-center justify-center">
          <div class="flex align-center justify-center" style="margin-right: 150px;">
            <a style="font-size: 20px;color:#003A81;font-family: Algerian;">Logo商标</a>
          </div>
          <div style="width: 470px;height: 30px;background-color: #F2F2F5;" class="flex align-center justify-between">
            <div class="flex align-center justify-center" style="margin-left: 10px;">
              <input style="background-color: #F2F2F5;outline:none;margin: 0;padding: 0;border: 1px solid #F2F2F5;width: 430px;"
                     :placeholder="searchboxPlaceholder" class="searchbox"></input>
            </div>
            <div class="flex justify-center align-center" style="margin-right: 10px;">
              <a class="icon iconfont icon-sousuo" style="color: black;"></a>
            </div>
          </div>
        </div>
        <div class="flex align-center justify-center" >
          <!--<a style="color: #696E78;width: 80px;">推荐</a>-->
          <div class="flex align-center justify-center" style="padding-left: 30px;width: 100px;">
            <a class="flex align-center justify-center">
              <span class="icon iconfont icon-resou" style="color: black;font-size: 20px;"></span>
              <span style="color: black;font-size: 15px;margin-left: 5px;">推荐</span>
            </a>
          </div>
          <div class="flex align-center justify-center" style="padding-left: 30px;width: 100px;">
            <a class="flex align-center justify-center">
              <span class="icon iconfont icon-guanzhu" style="color: black;font-size: 20px;"></span>
              <span style="color: black;font-size: 15px;margin-left: 5px;">关注</span>
            </a>
          </div>
          <div class="flex align-center justify-center" style="padding-left: 30px;width: 100px;">
            <a class="flex align-center justify-center">
              <span class="icon iconfont icon-jiangbei-" style="color: black;font-size: 20px;"></span>

              <span style="color: black;font-size: 15px;margin-left: 5px;">热搜</span>
            </a>
          </div>
          <div class="flex align-center justify-center" style="padding-left: 30px;width: 100px;">
            <a class="flex align-center justify-center">
              <span class="icon iconfont icon-ziyuan1" style="color:black;font-size: 20px;"></span>
              <span style="color: black;font-size: 15px;margin-left: 5px;">视频</span>
            </a>
          </div>
        </div>
      </div>
      <!--占位-->
      <div style="height: 50px;"></div>
      <div style="width: 100%;height: 2px;background-color: #EEEEEE;"></div>

      <!--轮播图-->
      <div style="width: 1160px;margin-top: 20px;margin-bottom: 20px;">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="item in 6" :key="item" class="flex align-center justify-center">
            <el-image :src="require('../../../assets/img/00'+item+'.jpg')" style="width: 598px;"></el-image>
            <!--<h3 class="medium">{{ item }}</h3>-->
          </el-carousel-item>
        </el-carousel>
      </div>
      <!--无限列表-->
      <div class="flex flex-column align-center justify-center">
        <div v-for="(val, index) in recommends" :key="index" class="flex flex-column align-center justify-center" style="width: 1200px;height: 190px;">
          <div style="width: 100%;border: 2px solid #EEEEEE;" class="flex align-center justify-between">
              <!--用户标识-->
            <div class="flex flex-column align-center justify-center">
              <div class="flex flex-column align-center justify-center" style="margin-left: 20px;margin-right: 20px;width: 100px;">
                <div class="flex" style="margin-bottom: 5px;margin-top: 5px;">
                  <el-image :src="val.avatar" style="width:80px;height: 80px;border-radius: 50%;"></el-image>
                </div>
                <div class="flex" style="margin-bottom: 5px;">
                  <div class="flex flex-column align-center justify-center">
                    <span style="color: #FF8140;font-size: 15px;width: 90px;" class="flex align-center justify-center text-ellipsis">{{val.nickname}}</span>
                  </div>
                </div>
                  <div class="flex" style="margin-bottom: 5px;">
                      <div class="flex flex-column align-center justify-center">
                          <span>{{val.tag}}</span>
                      </div>
                  </div>
                <div class="flex" style="margin-bottom: 5px;">
                  <a v-if="!val.isUserCare" style="width: 72px;height: 20px;border-radius: 15px;background-color: #FF8140">
                    <span style="color: #FFFFFF" class="flex align-center justify-center">+关注</span>
                  </a>
                  <a v-if="val.isUserCare" style="width: 72px;height: 20px;border-radius: 15px;border: 2px solid #FF8140;">
                    <span style="color: #FF8140;" class="flex align-center justify-center">已关注</span>
                  </a>
                </div>
              </div>
            </div>

              <!--用户发表内容-->
            <div style="height: 170px;margin-left: 10px;margin-bottom: 5px;" class="flex flex-column flex-1">
              <div class="flex flex-1 align-center justify-between" style="margin-right: 20px;">
                  <div class="flex">

                  </div>
                  <!--<div class="flex align-center justify-center" style="width: 80px;">-->
                      <!--<span class="flex flex-1 align-center justify-center">阅读</span>-->
                      <!--<span class="flex flex-1 align-center justify-center" style="color: black;font-size: 15px;margin-left: 5px;">168</span>-->
                  <!--</div>-->
                  <div class="flex align-center justify-center"
                       style="width: 90px;border-radius: 15px;margin-top: 10px;font-size: 15px;">
                      <span>阅读</span>
                      <span style="margin-left: 5px;">10000+</span>
                  </div>
              </div>
              <div style="flex: 4;font-size: 15px;" class="flex flex-column">
                  <span class="flex" style="margin-bottom: 15px;">{{val.text}}</span>
                  <div class="flex">
                      <div class="flex" v-for="i in 9" :key="i" style="margin-right: 5px;cursor:pointer;">
                          <el-image :src="require('../../../assets/img/001.jpg')" style="width:65px;height: 65px;"></el-image>
                      </div>
                  </div>
              </div>


                <!--转发、评论、点赞-->
              <div class="flex align-center flex-1">
                <div class="flex align-center justify-between flex-1">
                    <div class="flex" style="color: black;font-size: 15px;">
                        {{val.createtime|formatTime}}
                    </div>
                    <div class="flex align-center justify-center">
                        <div class="flex align-center justify-center">
                            <a class="flex flex-1 align-center justify-center" style="width: 100px;margin-right: 20px;">
                                <span class="flex align-center justify-center icon iconfont icon-fenxiang2" style="color: black;font-size: 20px;width: 40px;"></span>
                                <span class="flex flex-1 align-center justify-center" style="color: black;font-size: 15px;">10000+</span>
                            </a>

                            <a class="flex flex-1 align-center justify-center" style="width: 100px;margin-right: 20px;">
                                <span class="flex align-center justify-center icon iconfont icon-pinglun1" style="color: black;font-size: 20px;width: 40px;"></span>
                                <span class="flex flex-1 align-center justify-center" style="color: black;font-size: 15px;">9999</span>
                            </a>
                            <a class="flex flex-1 align-center justify-center" style="width: 100px;margin-right: 20px;">
                                <span class="flex align-center justify-center icon iconfont icon-dianzan" style="color: black;font-size: 20px;width: 40px;"></span>
                                <span class="flex flex-1 align-center justify-center" style="color: black;font-size: 15px;">46</span>
                            </a>
                        </div>
                    </div>
                </div>
              </div>

                <!--end-->
            </div>
          </div>
          <div style="width: 100%;height: 20px;background-color: #FFFFFF;"></div>
        </div>
      </div>


      <!--<div class="flex flex-column align-center justify-center">-->
      <!--<div v-for="i in 6" :key="i" class="flex flex-column align-center justify-center" style="width: 1200px;height: 190px;">-->
      <!--<div style="width: 100%;height: 170px;border: 2px solid #EEEEEE;" class="flex align-center justify-center">-->
      <!--<div class="flex flex-column align-center justify-center" style="flex: 1;">-->
      <!--<el-image :src="require('../../../assets/img/001.jpg')" style="width:80px;height: 80px;border-radius: 50%;"></el-image>-->
      <!--<div class="flex flex-column align-center justify-center">-->
      <!--<span>{{'朱一龙'}}</span>-->
      <!--<span>{{1585277605|formatTime}}</span>-->
      <!--</div>-->
      <!--<a style="width: 72px;height: 20px;border-radius: 15px;background-color: #FF8140">-->
      <!--<span style="color: #FFFFFF" class="flex align-center justify-center">+关注</span>-->
      <!--</a>-->
      <!--</div>-->
      <!--<div style="flex: 7;">-->

      <!--</div>-->
      <!--</div>-->
      <!--<div style="width: 100%;height: 20px;background-color: #FFFFFF;"></div>-->
      <!--</div>-->
      <!--</div>-->


    </div>

  </div>
</template>

<script>
    import Base from '../../../assets/mixins/base.js';
    export default {
      name: "home",
      mixins:[Base],
      data(){
        return{
          windowHeight:0,
          windowWidth:0,
          searchboxPlaceholder:'大家正在搜：动态热搜',
          recommends:[
            {
              type:1,//
              avatar: require('../../../assets/img/001.jpg'),//后期改成连带require函数改成url
              nickname:'二逼青年欢乐',
              createtime:1585277605,//后期改成时间戳
              tag:"知名摄影博主",//标签
              isUserCare:false,//用户是否关注
              text:"营业中3。。。",//文本
              shareInfo:{
                shareNum:170002,
                userShareNum:2
              },
              commentInfo:{
                commentNum:40000,
                userCommentNum:2
              },
              supportInfo:{
                supportNum:50000,
                isUserSupport:false
              }
            },
            {
              type:1,//
              avatar: require('../../../assets/img/002.jpg'),//后期改成连带require函数改成url
              nickname:'哇哦',
              createtime:1585277605,//后期改成时间戳
              tag:"知名摄影博主",//标签
              isUserCare:true,//用户是否关注
              text:"营业中3。。。",//文本
              shareInfo:{
                shareNum:170002,
                userShareNum:2
              },
              commentInfo:{
                commentNum:40000,
                userCommentNum:2
              },
              supportInfo:{
                supportNum:50000,
                isUserSupport:false
              }
            },
              {
                  type:1,//
                  avatar: require('../../../assets/img/003.jpg'),//后期改成连带require函数改成url
                  nickname:'二逼青年欢乐多多',
                  createtime:1585277605,//后期改成时间戳
                  tag:"知名摄影博主",//标签
                  isUserCare:true,//用户是否关注
                  text:"营业中3。。。",//文本
                  shareInfo:{
                      shareNum:170002,
                      userShareNum:2
                  },
                  commentInfo:{
                      commentNum:40000,
                      userCommentNum:2
                  },
                  supportInfo:{
                      supportNum:50000,
                      isUserSupport:false
                  }
              },
              {
                  type:1,//
                  avatar: require('../../../assets/img/004.jpg'),//后期改成连带require函数改成url
                  nickname:'@0.0@',
                  createtime:1585277605,//后期改成时间戳
                  tag:"知名摄影博主",//标签
                  isUserCare:true,//用户是否关注
                  text:"营业中3。。。",//文本
                  shareInfo:{
                      shareNum:170002,
                      userShareNum:2
                  },
                  commentInfo:{
                      commentNum:40000,
                      userCommentNum:2
                  },
                  supportInfo:{
                      supportNum:50000,
                      isUserSupport:false
                  }
              }
          ]
        }
      },
      mounted:function(){
        this.windowHeight = document.documentElement.clientHeight;
        this.windowWidth = document.documentElement.clientWidth;
      },
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .searchbox::-webkit-input-placeholder{
    color: #656872;
    font-size:12px;
  }
</style>
